前言

最後一天我將文章分類成幾種類型
已經幫你整理好分類了，如果想要快速索引就將捲軸捲到特地區域觀看該系列文章就好。

• 循序漸進式系列
  • 搭配官方文件和所有文章可以快速瀏覽整個從create到react
  • 本系列呼應首篇名稱與規劃—React生態系 library?framework？的規劃，詳情請點擊後觀看
• Javascript系列
  • 本系列給有在寫Javascript的人，即便沒有寫React也能增加Javascript知識深度的人
• webpack 打包系列
  • 本系列給想了解webpack的人，內容涵蓋從0到打包react的基本打包知識
• Gatsby系列
  • 本系列給已經寫過React的人，內容涵蓋GatsbyJs框架基本認識
• React hook介紹系列
  • 本系列給正在學react的人，內容涵蓋許多hook的介紹。
• 個人推薦系列
  • 本系列就是附圖跟著範例做、不怕React再弄錯
• 中文字數前5名文章系列
  • 就是中文字數前5多的文章
• 個人部落格系列
  • 並沒有這個系列，而是我的部落格，有空過來逛逛XD連結在此→水土曜來了

循序漸進系列

Create React前—可以知道的東西 Day1~Day5

• 名稱與規劃—React生態系 library?framework？
• 解構賦值Destructuring assignment—為什麼需要和用途
• 為什麼需要模組化？—ESModule模組介紹、React整理code技法與基本技巧
• 你所要知道的NPM基本知識關於package.json、semantic version及淺談update
• 從編譯Sass實作來理解webpack前端自動化打包工具

Create React前中—更了解React是什麼 Day6~Day10

• 從安裝webpack理解react與react-dom(without JSX)
• 用createElement淺談為什麼react需要jsx–feat.webpack編譯jsx
• create-react-app內容、優缺點、是否eject評估
• 在github page部署react—簡述為何重新整理出現404 feat.解決方案
• 用toDoList淺談原生JS、Vue、React寫法

Create React中—React實作中 Day11~Day20

• React—jsx基本介紹、snippet、各種css style解決方案
• function component的各種點記法(dot notation)，JSX的使用技巧
• 從jQuery到VirtualDOM來淺談什麼是state—useState完整範例與介紹
• siedEffect是什麼？—useEffect的4種情形、2個clearup範例、常見用途與注意事項
• React管理virtualDOM，為什麼還需要useRef?
• 從useRef理解forwardRef再解說useImperativeHandle—目的與用法
• 解決propDrilling問題—簡化consumer的useContext
• 為什麼useReducer，reducer詞彙解釋—用流程圖解釋useReducer
• 從實作To Do List理解Listing State Up(附圖)(上)
• 從實作To Do List理解useState搭配useReducer運作模型—(附圖)(中)

Create React後—React第三方的生態系　Day21~Day29

• 從實作To Do List理解redux toolkit—分段講解step by step(下)
• 什麼是Flux設計、實作簡單ATM範例了解Redux三大原則feat.vanilla Javascript
• React route如何運作、建立404的路由、巢狀路由、動態路由
• React route—useNavigate介紹、控制history stack、傳遞參數、重新導向
• Material UI更名為MUI、基本介紹、加載字體、import方式—Typography元件
• 格線系統、基本用法、Responsive values、Grid version 2？—MUI
• 簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始
• GatsbyJs的Link多做了什麼達到更好的UX?—page component、Link元件

Javascript系列

• 名稱與規劃—React生態系 library?framework？
• 解構賦值Destructuring assignment—為什麼需要和用途
• 為什麼需要模組化？—ESModule模組介紹、React整理code技法與基本技巧
• 你所要知道的NPM基本知識關於package.json、semantic version及淺談update

webpack 打包系列

• 從編譯Sass實作來理解webpack前端自動化打包工具
• 從安裝webpack理解react與react-dom(without JSX)
• 用createElement淺談為什麼react需要jsx–feat.webpack編譯jsx

GatsbyJs系列

• 簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始
• GatsbyJs的Link多做了什麼達到更好的UX?—page component、Link元件

中文字數前5名文章系列

• 為什麼需要模組化？—ESModule模組介紹、React整理code技法與基本技巧
• 你所要知道的NPM基本知識關於package.json、semantic version及淺談update
• 用toDoList淺談原生JS、Vue、React寫法
• 解構賦值Destructuring assignment—為什麼需要和用途
• 從jQuery到VirtualDOM來淺談什麼是state—useState完整範例與介紹

個人推薦系列

• 解構賦值Destructuring assignment—為什麼需要和用途
• 從jQuery到VirtualDOM來淺談什麼是state—useState完整範例與介紹
• siedEffect是什麼？—useEffect的4種情形、2個clearup範例、常見用途與注意事項
• 什麼是Flux設計、實作簡單ATM範例了解Redux三大原則feat.vanilla Javascript
• 從實作To Do List理解OOO系列
  • 從實作To Do List理解Listing State Up(附圖)(上)
  • 從實作To Do List理解useState搭配useReducer運作模型—(附圖)(中)
  • 從實作To Do List理解redux toolkit—分段講解step by step(下)

React hook介紹系列

範例程式碼

用toDoList淺談原生JS、Vue、React寫法-範例一

Github—to-do-list-collection

如下圖

從實作To Do List理解OOO系列-範例二

Github—實作簡易react的To do list

切換branch可以得到同畫面，不同的內部實作包含以下版本

• useState版本
• useContext搭配useReducer版本
• Redux的toolkit版本

React hook介紹系列—範例三

Github—React的各種Hook小範例與簡易解說

以下為各個branch名稱和內容的大綱

• noHookNoRender
  • 沒有搭配Hook無法渲染畫面
• useStateButNoUpdateFunction
  • 使用useState，不使用更新函式
• useStateButNumberAddOne
  • 使用setTimeOut並不使用更新函式
• useStateSetState
  • 使用更新函式
• useStateUseUpdateFunction
  • 使用setTimeOut並使用更新函式
• useStateNoLazyInitial
  • 沒有lazyInitial
• useStateUseLazyInitialzer
  • 使用LazyInitialzer
• useEffectPrint
  • 使用useEffect僅在畫面載入時印
• useEffectPrintManyTimes
  • 使用useEffect當畫面任何重新渲染時候印
• useEffectIntervalCleanUp
  • 使用useEffect並且cleanUp
• useEffectCountdownExample
  • 使用useEffect用倒數計時器範例
• propsDrilling
  • 造成props drilling
• useContextProvideConsumer
  • 使用context加入provide和consumer解決過度傳遞
• useContextSimplifyConsumer
  • 使用useContext簡化consumer
• useContextNestContext
  • 巢狀context只有內層會被顯示
• useContextRerenderProblem
  • useContext造成多次rerender
• useReducerInOneComponent
  • 使用useReducer在同一個component
• useReducerInComponent
  • 使用useReducer將reducer拆出
• useReducerAddPayload
  • 使用useReducer添加payload
• separateReducerAndInitialState
  • 使用useReducer拆分出initialState
• useReducerDinefineActiontypeActionCreater
  • 使用useReducer定義actionType和actionCreater
• memoChildComponentRender
  • 未使用React.memo
• memoWrapChildComponent
  • 使用React.memo包裹住component
• memoButPropsIsObject
  • 使用Reactmemo但是prop是物件
• memoAddNumberProps
  • 使用指定的prop作為memo重新渲染的依據
• useRefInitHello
  • 使用useRef代入字串"hello"
• useRefOnClickAndFocusInput
  • 使用useRef聚焦input輸入框
• useRefOnClickButNotRerender
  • 使用useRef添加input以至於資料與狀態不一
• ForwardRefMyInput
  • 使用useRef搭配forwardRef使父層可存取子層component的DOM

Gatsby 範例

雖然Gatsby只是初步介紹，這是先前在練習的時候使用了最基本的hello world starter慢慢添加設定，有興趣的人可以觀看一下搭配官方文件服用。
react-blog-practice，另外我的部落格也是使用Gatsby從0慢慢添加插件和library，有興趣也可以觀看一下水土曜來了

webpack範例

webpack-note這是先前在練習webpack所構成的範例檔，對於打包有興趣的人也可以觀看一下範例檔中的package.json，算是也能夠對webpack基本的了解。

感謝、結語

首先感謝催稿雞的各種賣力催稿詳情如下圖和備註，要不是催稿雞的凹嗚嗚嗚叫我恐怕無法完成這些文章(應該不是這樣吧?)

當你還沒交稿的時候就會被tag

當一天完成比賽的時候將會列出所有團隊當天的po文和以下句子

備註：催稿雞是好想工作室slack實作的一個聊天機器人，每天固定時間將會負責催稿未繳交文章的成員以及當天結束統整團隊各成員PO文

感謝國內外大大們的文章教學，並不是我獨立完成了這些文章，而是所有願意分享 知識的人與我完成了這些文章，套一句牛頓的話，如果我看得比其他人遠，是因為我站在巨人的肩膀上

因此

如果我站在101大樓的肩膀，我可以看多遠？

如下題

假設地球半徑是6400公里，站在101頂樓460公尺，試問在光線充足無迷霧與沒有遮擋視線的情況下最遠可以觀看的距離是多少公里，(答案求到整數以上就好)？

解題算式(6400+x)²=6400²+x²算出x的值就是可看到的距離

我幫你算出來了，答案近似於76.73公里，你現在站在巨人的肩膀上，不用解一元二次方程式了。

最後感謝好想工作室的各位夥伴充滿歡樂的氣氛給我寫程式與文章的動力，也希望這些文章對各位讀者有所幫助，以上。